<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8"/>
  <title>iconfont Demo</title>
  <link rel="shortcut icon" href="//img.alicdn.com/imgextra/i4/O1CN01Z5paLz1O0zuCC7osS_!!6000000001644-55-tps-83-82.svg" type="image/x-icon"/>
  <link rel="icon" type="image/svg+xml" href="//img.alicdn.com/imgextra/i4/O1CN01Z5paLz1O0zuCC7osS_!!6000000001644-55-tps-83-82.svg"/>
  <link rel="stylesheet" href="https://g.alicdn.com/thx/cube/1.3.2/cube.min.css">
  <link rel="stylesheet" href="demo.css">
  <link rel="stylesheet" href="iconfont.css">
  <script src="iconfont.js"></script>
  <!-- jQuery -->
  <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/7bfddb60-08e8-11e9-9b04-53e73bb6408b.js"></script>
  <!-- 代码高亮 -->
  <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/a3f714d0-08e6-11e9-8a15-ebf944d7534c.js"></script>
  <style>
    .main .logo {
      margin-top: 0;
      height: auto;
    }

    .main .logo a {
      display: flex;
      align-items: center;
    }

    .main .logo .sub-title {
      margin-left: 0.5em;
      font-size: 22px;
      color: #fff;
      background: linear-gradient(-45deg, #3967FF, #B500FE);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
  </style>
</head>
<body>
  <div class="main">
    <h1 class="logo"><a href="https://www.iconfont.cn/" title="iconfont 首页" target="_blank">
      <img width="200" src="https://img.alicdn.com/imgextra/i3/O1CN01Mn65HV1FfSEzR6DKv_!!6000000000514-55-tps-228-59.svg">
      
    </a></h1>
    <div class="nav-tabs">
      <ul id="tabs" class="dib-box">
        <li class="dib active"><span>Unicode</span></li>
        <li class="dib"><span>Font class</span></li>
        <li class="dib"><span>Symbol</span></li>
      </ul>
      
      <a href="https://www.iconfont.cn/manage/index?manage_type=myprojects&projectId=4003443" target="_blank" class="nav-more">查看项目</a>
      
    </div>
    <div class="tab-container">
      <div class="content unicode" style="display: block;">
          <ul class="icon_lists dib-box">
          
            <li class="dib">
              <span class="icon iconfont">&#xe7c9;</span>
                <div class="name">lock</div>
                <div class="code-name">&amp;#xe7c9;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe715;</span>
                <div class="name">表单</div>
                <div class="code-name">&amp;#xe715;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6f5;</span>
                <div class="name">editor</div>
                <div class="code-name">&amp;#xe6f5;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe63a;</span>
                <div class="name">光线感应</div>
                <div class="code-name">&amp;#xe63a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe700;</span>
                <div class="name">round-waves-24px</div>
                <div class="code-name">&amp;#xe700;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe62f;</span>
                <div class="name">文件管理</div>
                <div class="code-name">&amp;#xe62f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe67a;</span>
                <div class="name">地图</div>
                <div class="code-name">&amp;#xe67a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe60b;</span>
                <div class="name">申请</div>
                <div class="code-name">&amp;#xe60b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe60f;</span>
                <div class="name">今日待办</div>
                <div class="code-name">&amp;#xe60f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe60c;</span>
                <div class="name">13 AI 实验室</div>
                <div class="code-name">&amp;#xe60c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe60a;</span>
                <div class="name">数字（滚动）</div>
                <div class="code-name">&amp;#xe60a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe61a;</span>
                <div class="name">页面操作</div>
                <div class="code-name">&amp;#xe61a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe867;</span>
                <div class="name">功能</div>
                <div class="code-name">&amp;#xe867;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6db;</span>
                <div class="name">数据</div>
                <div class="code-name">&amp;#xe6db;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe711;</span>
                <div class="name">可视化</div>
                <div class="code-name">&amp;#xe711;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe889;</span>
                <div class="name">通知-copy</div>
                <div class="code-name">&amp;#xe889;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe88a;</span>
                <div class="name">皮肤-copy</div>
                <div class="code-name">&amp;#xe88a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe88b;</span>
                <div class="name">字体-copy</div>
                <div class="code-name">&amp;#xe88b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe88c;</span>
                <div class="name">搜索-copy</div>
                <div class="code-name">&amp;#xe88c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe667;</span>
                <div class="name">大图模式</div>
                <div class="code-name">&amp;#xe667;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe679;</span>
                <div class="name">字典</div>
                <div class="code-name">&amp;#xe679;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe67f;</span>
                <div class="name">图片</div>
                <div class="code-name">&amp;#xe67f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe620;</span>
                <div class="name">地图</div>
                <div class="code-name">&amp;#xe620;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe67c;</span>
                <div class="name">系统</div>
                <div class="code-name">&amp;#xe67c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe64d;</span>
                <div class="name">角色</div>
                <div class="code-name">&amp;#xe64d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe87a;</span>
                <div class="name">音量</div>
                <div class="code-name">&amp;#xe87a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe888;</span>
                <div class="name"> 筛选</div>
                <div class="code-name">&amp;#xe888;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe603;</span>
                <div class="name">首页</div>
                <div class="code-name">&amp;#xe603;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe642;</span>
                <div class="name">权限</div>
                <div class="code-name">&amp;#xe642;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe607;</span>
                <div class="name">搜索</div>
                <div class="code-name">&amp;#xe607;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe712;</span>
                <div class="name">组织</div>
                <div class="code-name">&amp;#xe712;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe606;</span>
                <div class="name">表格</div>
                <div class="code-name">&amp;#xe606;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe615;</span>
                <div class="name">通知</div>
                <div class="code-name">&amp;#xe615;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe608;</span>
                <div class="name">用户</div>
                <div class="code-name">&amp;#xe608;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe62b;</span>
                <div class="name">皮肤</div>
                <div class="code-name">&amp;#xe62b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe609;</span>
                <div class="name">菜单</div>
                <div class="code-name">&amp;#xe609;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe613;</span>
                <div class="name">列表形式</div>
                <div class="code-name">&amp;#xe613;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe604;</span>
                <div class="name">字体</div>
                <div class="code-name">&amp;#xe604;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe732;</span>
                <div class="name">水杯</div>
                <div class="code-name">&amp;#xe732;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6b7;</span>
                <div class="name">瀑布流</div>
                <div class="code-name">&amp;#xe6b7;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe610;</span>
                <div class="name">水滴</div>
                <div class="code-name">&amp;#xe610;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe614;</span>
                <div class="name">吉他</div>
                <div class="code-name">&amp;#xe614;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6d7;</span>
                <div class="name">操作</div>
                <div class="code-name">&amp;#xe6d7;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe652;</span>
                <div class="name">组件</div>
                <div class="code-name">&amp;#xe652;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe622;</span>
                <div class="name">页面</div>
                <div class="code-name">&amp;#xe622;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe663;</span>
                <div class="name">表单</div>
                <div class="code-name">&amp;#xe663;</div>
              </li>
          
          </ul>
          <div class="article markdown">
          <h2 id="unicode-">Unicode 引用</h2>
          <hr>

          <p>Unicode 是字体在网页端最原始的应用方式，特点是：</p>
          <ul>
            <li>支持按字体的方式去动态调整图标大小，颜色等等。</li>
            <li>默认情况下不支持多色，直接添加多色图标会自动去色。</li>
          </ul>
          <blockquote>
            <p>注意：新版 iconfont 支持两种方式引用多色图标：SVG symbol 引用方式和彩色字体图标模式。（使用彩色字体图标需要在「编辑项目」中开启「彩色」选项后并重新生成。）</p>
          </blockquote>
          <p>Unicode 使用步骤如下：</p>
          <h3 id="-font-face">第一步：拷贝项目下面生成的 <code>@font-face</code></h3>
<pre><code class="language-css"
>@font-face {
  font-family: 'iconfont';
  src: 
       url('data:application/x-font-woff2;charset=utf-8;base64,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') format('woff2'),
       url('iconfont.woff?t=1691039687866') format('woff'),
       url('iconfont.ttf?t=1691039687866') format('truetype');
}
</code></pre>
          <h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
<pre><code class="language-css"
>.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
</code></pre>
          <h3 id="-">第三步：挑选相应图标并获取字体编码，应用于页面</h3>
<pre>
<code class="language-html"
>&lt;span class="iconfont"&gt;&amp;#x33;&lt;/span&gt;
</code></pre>
          <blockquote>
            <p>"iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
          </blockquote>
          </div>
      </div>
      <div class="content font-class">
        <ul class="icon_lists dib-box">
          
          <li class="dib">
            <span class="icon iconfont icon-lock"></span>
            <div class="name">
              lock
            </div>
            <div class="code-name">.icon-lock
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-biaodan1"></span>
            <div class="name">
              表单
            </div>
            <div class="code-name">.icon-biaodan1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-editor"></span>
            <div class="name">
              editor
            </div>
            <div class="code-name">.icon-editor
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-guangxianganying"></span>
            <div class="name">
              光线感应
            </div>
            <div class="code-name">.icon-guangxianganying
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-round-waves-px"></span>
            <div class="name">
              round-waves-24px
            </div>
            <div class="code-name">.icon-round-waves-px
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-wenjianguanli"></span>
            <div class="name">
              文件管理
            </div>
            <div class="code-name">.icon-wenjianguanli
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-ditumap29"></span>
            <div class="name">
              地图
            </div>
            <div class="code-name">.icon-ditumap29
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shenqing"></span>
            <div class="name">
              申请
            </div>
            <div class="code-name">.icon-shenqing
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-jinridaiban"></span>
            <div class="name">
              今日待办
            </div>
            <div class="code-name">.icon-jinridaiban
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-AIshiyanshi"></span>
            <div class="name">
              13 AI 实验室
            </div>
            <div class="code-name">.icon-AIshiyanshi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shuzigundong"></span>
            <div class="name">
              数字（滚动）
            </div>
            <div class="code-name">.icon-shuzigundong
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-yemiancaozuo"></span>
            <div class="name">
              页面操作
            </div>
            <div class="code-name">.icon-yemiancaozuo
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-gongneng"></span>
            <div class="name">
              功能
            </div>
            <div class="code-name">.icon-gongneng
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shuju"></span>
            <div class="name">
              数据
            </div>
            <div class="code-name">.icon-shuju
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-keshihuakanban"></span>
            <div class="name">
              可视化
            </div>
            <div class="code-name">.icon-keshihuakanban
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-tongzhi-copy"></span>
            <div class="name">
              通知-copy
            </div>
            <div class="code-name">.icon-tongzhi-copy
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-pifu-copy"></span>
            <div class="name">
              皮肤-copy
            </div>
            <div class="code-name">.icon-pifu-copy
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-ziti-copy"></span>
            <div class="name">
              字体-copy
            </div>
            <div class="code-name">.icon-ziti-copy
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-sousuo-copy"></span>
            <div class="name">
              搜索-copy
            </div>
            <div class="code-name">.icon-sousuo-copy
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-datumoshi"></span>
            <div class="name">
              大图模式
            </div>
            <div class="code-name">.icon-datumoshi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-zidian"></span>
            <div class="name">
              字典
            </div>
            <div class="code-name">.icon-zidian
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-tupian"></span>
            <div class="name">
              图片
            </div>
            <div class="code-name">.icon-tupian
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-ditu"></span>
            <div class="name">
              地图
            </div>
            <div class="code-name">.icon-ditu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-xitong"></span>
            <div class="name">
              系统
            </div>
            <div class="code-name">.icon-xitong
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-jiaose"></span>
            <div class="name">
              角色
            </div>
            <div class="code-name">.icon-jiaose
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-yinliang"></span>
            <div class="name">
              音量
            </div>
            <div class="code-name">.icon-yinliang
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shaixuan"></span>
            <div class="name">
               筛选
            </div>
            <div class="code-name">.icon-shaixuan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shouye"></span>
            <div class="name">
              首页
            </div>
            <div class="code-name">.icon-shouye
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-quanxian"></span>
            <div class="name">
              权限
            </div>
            <div class="code-name">.icon-quanxian
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-sousuo"></span>
            <div class="name">
              搜索
            </div>
            <div class="code-name">.icon-sousuo
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-zuzhi"></span>
            <div class="name">
              组织
            </div>
            <div class="code-name">.icon-zuzhi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-biaoge"></span>
            <div class="name">
              表格
            </div>
            <div class="code-name">.icon-biaoge
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-tongzhi"></span>
            <div class="name">
              通知
            </div>
            <div class="code-name">.icon-tongzhi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-yonghu"></span>
            <div class="name">
              用户
            </div>
            <div class="code-name">.icon-yonghu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-pifu"></span>
            <div class="name">
              皮肤
            </div>
            <div class="code-name">.icon-pifu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-caidan"></span>
            <div class="name">
              菜单
            </div>
            <div class="code-name">.icon-caidan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-liebiaoxingshi"></span>
            <div class="name">
              列表形式
            </div>
            <div class="code-name">.icon-liebiaoxingshi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-ziti"></span>
            <div class="name">
              字体
            </div>
            <div class="code-name">.icon-ziti
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shuibei"></span>
            <div class="name">
              水杯
            </div>
            <div class="code-name">.icon-shuibei
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-pubuliu"></span>
            <div class="name">
              瀑布流
            </div>
            <div class="code-name">.icon-pubuliu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-di"></span>
            <div class="name">
              水滴
            </div>
            <div class="code-name">.icon-di
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-ziyuan9"></span>
            <div class="name">
              吉他
            </div>
            <div class="code-name">.icon-ziyuan9
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-caozuo"></span>
            <div class="name">
              操作
            </div>
            <div class="code-name">.icon-caozuo
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-zujian"></span>
            <div class="name">
              组件
            </div>
            <div class="code-name">.icon-zujian
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-yemian"></span>
            <div class="name">
              页面
            </div>
            <div class="code-name">.icon-yemian
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-biaodan"></span>
            <div class="name">
              表单
            </div>
            <div class="code-name">.icon-biaodan
            </div>
          </li>
          
        </ul>
        <div class="article markdown">
        <h2 id="font-class-">font-class 引用</h2>
        <hr>

        <p>font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode 书写不直观，语意不明确的问题。</p>
        <p>与 Unicode 使用方式相比，具有如下特点：</p>
        <ul>
          <li>相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。</li>
          <li>因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用。</li>
        </ul>
        <p>使用步骤如下：</p>
        <h3 id="-fontclass-">第一步：引入项目下面生成的 fontclass 代码：</h3>
<pre><code class="language-html">&lt;link rel="stylesheet" href="./iconfont.css"&gt;
</code></pre>
        <h3 id="-">第二步：挑选相应图标并获取类名，应用于页面：</h3>
<pre><code class="language-html">&lt;span class="iconfont icon-xxx"&gt;&lt;/span&gt;
</code></pre>
        <blockquote>
          <p>"
            iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
        </blockquote>
      </div>
      </div>
      <div class="content symbol">
          <ul class="icon_lists dib-box">
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-lock"></use>
                </svg>
                <div class="name">lock</div>
                <div class="code-name">#icon-lock</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-biaodan1"></use>
                </svg>
                <div class="name">表单</div>
                <div class="code-name">#icon-biaodan1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-editor"></use>
                </svg>
                <div class="name">editor</div>
                <div class="code-name">#icon-editor</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-guangxianganying"></use>
                </svg>
                <div class="name">光线感应</div>
                <div class="code-name">#icon-guangxianganying</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-round-waves-px"></use>
                </svg>
                <div class="name">round-waves-24px</div>
                <div class="code-name">#icon-round-waves-px</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-wenjianguanli"></use>
                </svg>
                <div class="name">文件管理</div>
                <div class="code-name">#icon-wenjianguanli</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-ditumap29"></use>
                </svg>
                <div class="name">地图</div>
                <div class="code-name">#icon-ditumap29</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shenqing"></use>
                </svg>
                <div class="name">申请</div>
                <div class="code-name">#icon-shenqing</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-jinridaiban"></use>
                </svg>
                <div class="name">今日待办</div>
                <div class="code-name">#icon-jinridaiban</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-AIshiyanshi"></use>
                </svg>
                <div class="name">13 AI 实验室</div>
                <div class="code-name">#icon-AIshiyanshi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shuzigundong"></use>
                </svg>
                <div class="name">数字（滚动）</div>
                <div class="code-name">#icon-shuzigundong</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-yemiancaozuo"></use>
                </svg>
                <div class="name">页面操作</div>
                <div class="code-name">#icon-yemiancaozuo</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-gongneng"></use>
                </svg>
                <div class="name">功能</div>
                <div class="code-name">#icon-gongneng</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shuju"></use>
                </svg>
                <div class="name">数据</div>
                <div class="code-name">#icon-shuju</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-keshihuakanban"></use>
                </svg>
                <div class="name">可视化</div>
                <div class="code-name">#icon-keshihuakanban</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-tongzhi-copy"></use>
                </svg>
                <div class="name">通知-copy</div>
                <div class="code-name">#icon-tongzhi-copy</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-pifu-copy"></use>
                </svg>
                <div class="name">皮肤-copy</div>
                <div class="code-name">#icon-pifu-copy</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-ziti-copy"></use>
                </svg>
                <div class="name">字体-copy</div>
                <div class="code-name">#icon-ziti-copy</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-sousuo-copy"></use>
                </svg>
                <div class="name">搜索-copy</div>
                <div class="code-name">#icon-sousuo-copy</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-datumoshi"></use>
                </svg>
                <div class="name">大图模式</div>
                <div class="code-name">#icon-datumoshi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-zidian"></use>
                </svg>
                <div class="name">字典</div>
                <div class="code-name">#icon-zidian</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-tupian"></use>
                </svg>
                <div class="name">图片</div>
                <div class="code-name">#icon-tupian</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-ditu"></use>
                </svg>
                <div class="name">地图</div>
                <div class="code-name">#icon-ditu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-xitong"></use>
                </svg>
                <div class="name">系统</div>
                <div class="code-name">#icon-xitong</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-jiaose"></use>
                </svg>
                <div class="name">角色</div>
                <div class="code-name">#icon-jiaose</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-yinliang"></use>
                </svg>
                <div class="name">音量</div>
                <div class="code-name">#icon-yinliang</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shaixuan"></use>
                </svg>
                <div class="name"> 筛选</div>
                <div class="code-name">#icon-shaixuan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shouye"></use>
                </svg>
                <div class="name">首页</div>
                <div class="code-name">#icon-shouye</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-quanxian"></use>
                </svg>
                <div class="name">权限</div>
                <div class="code-name">#icon-quanxian</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-sousuo"></use>
                </svg>
                <div class="name">搜索</div>
                <div class="code-name">#icon-sousuo</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-zuzhi"></use>
                </svg>
                <div class="name">组织</div>
                <div class="code-name">#icon-zuzhi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-biaoge"></use>
                </svg>
                <div class="name">表格</div>
                <div class="code-name">#icon-biaoge</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-tongzhi"></use>
                </svg>
                <div class="name">通知</div>
                <div class="code-name">#icon-tongzhi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-yonghu"></use>
                </svg>
                <div class="name">用户</div>
                <div class="code-name">#icon-yonghu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-pifu"></use>
                </svg>
                <div class="name">皮肤</div>
                <div class="code-name">#icon-pifu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-caidan"></use>
                </svg>
                <div class="name">菜单</div>
                <div class="code-name">#icon-caidan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-liebiaoxingshi"></use>
                </svg>
                <div class="name">列表形式</div>
                <div class="code-name">#icon-liebiaoxingshi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-ziti"></use>
                </svg>
                <div class="name">字体</div>
                <div class="code-name">#icon-ziti</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shuibei"></use>
                </svg>
                <div class="name">水杯</div>
                <div class="code-name">#icon-shuibei</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-pubuliu"></use>
                </svg>
                <div class="name">瀑布流</div>
                <div class="code-name">#icon-pubuliu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-di"></use>
                </svg>
                <div class="name">水滴</div>
                <div class="code-name">#icon-di</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-ziyuan9"></use>
                </svg>
                <div class="name">吉他</div>
                <div class="code-name">#icon-ziyuan9</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-caozuo"></use>
                </svg>
                <div class="name">操作</div>
                <div class="code-name">#icon-caozuo</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-zujian"></use>
                </svg>
                <div class="name">组件</div>
                <div class="code-name">#icon-zujian</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-yemian"></use>
                </svg>
                <div class="name">页面</div>
                <div class="code-name">#icon-yemian</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-biaodan"></use>
                </svg>
                <div class="name">表单</div>
                <div class="code-name">#icon-biaodan</div>
            </li>
          
          </ul>
          <div class="article markdown">
          <h2 id="symbol-">Symbol 引用</h2>
          <hr>

          <p>这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇<a href="">文章</a>
            这种用法其实是做了一个 SVG 的集合，与另外两种相比具有如下特点：</p>
          <ul>
            <li>支持多色图标了，不再受单色限制。</li>
            <li>通过一些技巧，支持像字体那样，通过 <code>font-size</code>, <code>color</code> 来调整样式。</li>
            <li>兼容性较差，支持 IE9+，及现代浏览器。</li>
            <li>浏览器渲染 SVG 的性能一般，还不如 png。</li>
          </ul>
          <p>使用步骤如下：</p>
          <h3 id="-symbol-">第一步：引入项目下面生成的 symbol 代码：</h3>
<pre><code class="language-html">&lt;script src="./iconfont.js"&gt;&lt;/script&gt;
</code></pre>
          <h3 id="-css-">第二步：加入通用 CSS 代码（引入一次就行）：</h3>
<pre><code class="language-html">&lt;style&gt;
.icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
&lt;/style&gt;
</code></pre>
          <h3 id="-">第三步：挑选相应图标并获取类名，应用于页面：</h3>
<pre><code class="language-html">&lt;svg class="icon" aria-hidden="true"&gt;
  &lt;use xlink:href="#icon-xxx"&gt;&lt;/use&gt;
&lt;/svg&gt;
</code></pre>
          </div>
      </div>

    </div>
  </div>
  <script>
  $(document).ready(function () {
      $('.tab-container .content:first').show()

      $('#tabs li').click(function (e) {
        var tabContent = $('.tab-container .content')
        var index = $(this).index()

        if ($(this).hasClass('active')) {
          return
        } else {
          $('#tabs li').removeClass('active')
          $(this).addClass('active')

          tabContent.hide().eq(index).fadeIn()
        }
      })
    })
  </script>
</body>
</html>
